<template>
    <div>
   <h1>排房页面</h1>
    </div>
    <table class="table">
      <thead>
         <tr>
             <td>id</td>
             <td>房型名称</td>
            <td>房号</td>
         </tr>
      </thead>
        <thead>
         <tr v-for="a in data">
             <td>{{a.pgassId}}</td>
             <td>{{a.stareName}}</td>
            <td>{{a.starePteaName}}</td>
         </tr>
      </thead>
    </table>
    一共{{teea.count}}条,每页显示{{teea.size}}条,共{{teea.mumbe}}页,当前{{teea.index}}页 
     <input type="button" value="首页" @click="pang(1)">
       <input type="button" value="上一页" @click="pang(2)">

     <input type="button"  v-for="h in teea.mumbe" :value="p" @click="yews(p)">

        <input type="button" value="下一页" @click="pang(3)">
         <input type="button" value="尾页" @click="pang(4)">

       <input type="mubmre" style="width:45px;height:45px" v-model="teea.index"><input type="button" value="跳转" @click="te()">
        <select v-model="teea.size" @change="yete">
             <option value="1">1</option>    
              <option value="2">2</option>   
               <option value="3">3</option>   
                <option value="4">4</option>   
        </select>

</template>

<script setup lang="ts">
  import axios from 'axios';
  import{ref,onMounted} from 'vue';
 import {useRouter,useRoute} from 'vue-router';
 const router=useRouter();
  const route=useRoute();

 onMounted(()=>{
  
    Showw();
 })

 const yews=(val:any)=>{

      teea.value.index==val;


 }

  const teea=ref({
     index:1,
     size:2,
     count:0,
         mumbe:0,

  })

  

  const click=()=>{

       teea.value.index=1;
       Showw();

  }
 const pang=(val:any)=>{
   if(val==1){
      teea.value.index;
      Showw();
   }
     if(val==2&&teea.value.index>1){
      teea.value.index--;
      Showw();
   }
     if(val==3&&teea.value.index<teea.value.mumbe){
      teea.value.index++;
      Showw();
   }
     if(val==4){
     teea.value.index=teea.value.mumbe
     Showw();
   }

 }



  const te=(val:any)=>{
     if(teea.value.index>1&&teea.value.index<=teea.value.count){
         Showw();
     }else{
   teea.value.index=1;
     }

  }

  const yete=()=>{
    
  teea.value.index=1;

       Showw();
        
  }


  
   const data=ref([{
        "starePteaId": 2,
      "starePteaName": "101",
      "stareId": 1,
      "pgassId": 1
   }])

   const Showw=()=>{
     axios.get("https://localhost:7295/api/Pgass/Showw").then(res=>{
          data.value=res.data.mumbe;
   teea.value.count=res.data.count;
      teea.value.mumbe=Math.ceil(teea.value.count/teea.value.size)
     })
   }



  





</script>

<style scoped>

</style>
